<template>
<el-dialog :title="title"
	:visible.sync="dialogVisible"
	:before-close="handleClose"
	width="48%" >
		<div class="pdf-div" v-loading="loading" >
			<p class="arrow">
			
			<!-- <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span> -->
			{{currentPage}} / {{pageCount}}
			
			<!-- <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span> -->
			</p>
			
			<pdf :src="src" :page="currentPage" 
				@num-pages="pageCount=$event"
				@page-loaded="currentPage=$event"
				@loaded="loadPdfHandler"
				> 
			</pdf>
		</div>
	<span slot="footer" class="dialog-footer">
		<el-button type="primary" :disabled="btnChangeEnable" @click="changePdfPage(0)">上一页</el-button>
		<el-button type="primary" :disabled="btnChangeEnable" @click="changePdfPage(1)">下一页</el-button>
	</span>
</el-dialog>
</template>

<style lang="scss" scoped>
   .pdf-div{
      height: 65vh;
      overflow: auto;
    }
</style>
<script>
import pdf from 'vue-pdf'
import {handleGoUp} from '@/utils/TUtil'

  export default {
	name: "pdfPreview",
	components: {pdf},
	props:{
		src:String,
		title:String,
		dialogVisible:Boolean
	},
    data () {
      return {
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
		fileType: 'pdf', // 文件类型
		loading:true,
		btnChangeEnable:true
      }
	},
	created() {
		this.btnChangeEnable = true
　　	},
    methods:{
    	changePdfPage (val) {
    		if (val === 0 && this.currentPage > 1) {
          		this.currentPage--
          		// console.log(this.currentPage)
        	}
        	if (val === 1 && this.currentPage < this.pageCount) {
				this.currentPage++
				// console.log(this.currentPage)
			}
			handleGoUp(10);
      	},
      	// pdf加载时
    	loadPdfHandler () {
			this.loading = false
			this.btnChangeEnable = false
        	this.currentPage = 1 // 加载的时候先加载第一页
		},
		handleClose(done){
			this.$emit('update:dialogVisible',false)
			this.$emit('update:src','')
			this.btnChangeEnable=true
			this.currentPage = 1
		}
    }
  }

</script>